<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="110px" label-position="top">
				<el-row :gutter="1">
					<el-col :span="24">
                        <div class="titleBox">
                            {{mode=='show'?'查看物料':mode == 'edit'?'编辑物料':'新增物料'}}
                            <div>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
                                <!-- <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">审核</el-button>
                                <el-button type="danger" @click="submit" :disabled="mode == 'show'">退出</el-button> -->
                            </div>
                        </div>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料编码" prop="goods_code">
								<el-input v-model="form.goods_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料名称" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料分组" prop="cate_id">
								<el-select v-model="form.cate_id" filterable style="width: 97%" placeholder="请选择" clearable>
									<el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="规格型号" prop="goods_spec">
								<el-input v-model="form.goods_spec" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="计量单位" prop="unit_id">
								<el-select v-model="form.unit_id" filterable style="width: 97%" placeholder="请选择" clearable>
									<el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="仓库" prop="ware_id">
								<el-select v-model="form.ware_id" filterable style="width: 97%" placeholder="请选择" clearable>
									<el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料属性" prop="pay_type">
								<el-select v-model="form.pay_type" filterable style="width: 100%" placeholder="物料属性" clearable>
									<el-option label="自制" :value="1" />
									<el-option label="外购" :value="2" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="启用多计量" prop="is_unit">
								<el-switch v-model="form.is_unit" :active-value="1" :inactive-value="0"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="18">
							<el-form-item label="图片" prop="goods_image">
								<sc-upload-multiple v-model="form.goods_image" :limit="6" draggable></sc-upload-multiple>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card" v-if="form.is_unit == 1">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								单位设置
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1" v-for="(item,index) in form.unit_all" :key="index" class="box-card1">
						<el-col :xs="24" :sm="1" style="margin-right: 0;">
							<el-form-item label=" " prop="" label-width="0" style="text-align: center;display: flex;align-items: center;justify-content: center;">
								{{ index+1 }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3" style="margin-right: 0;">
							<el-form-item label=" " prop="" label-width="0">
								<el-select v-model="item.unit_id" filterable style="width: 97%" placeholder="请选择" clearable>
									<el-option v-for="item1 in unitList" :key="item1.id" :label="item1.unit_name" :value="item1.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="1" style="margin-right: 0;">
							<el-form-item label=" " prop="" label-width="0" style="text-align: center;display: flex;align-items: center;justify-content: center;">
								=
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label=" " prop="" label-width="0">
                                <el-input v-model="item.ratio" placeholder="换算比例" clearable/>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label=" " prop="unit_id" label-width="0">
								<el-select v-model="form.unit_id" filterable style="width: 50%" placeholder="请选择" disabled>
									<el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
								</el-select>
								<el-button style="margin-left: 10px;" v-if="index==0" type="primary" size="small" @click="form.unit_all.push({})">添加</el-button>
								<el-button style="margin-left: 10px;" v-if="index>=1" type="danger" size="small" @click="form.unit_all.splice(index,1)">删除</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="生产/委外单位" prop="pro_unit_id">
								<el-select v-model="form.pro_unit_id" filterable style="width: 97%" placeholder="请选择" clearable>
									<el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="报表辅助单位" prop="rep_unit_id">
								<el-select v-model="form.rep_unit_id" filterable style="width: 100%" placeholder="请选择" clearable>
									<el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								物料特征
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1" class="box-card1">
						<el-col :xs="24" :sm="3">
							<el-form-item label=" " prop="" label-width="0">
								<span style="margin-right: 10px;">可销售</span>
								<el-radio-group v-model="form.is_sale">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label=" " prop="" label-width="0">
								<span style="margin-right: 10px;">可采购</span>
								<el-radio-group v-model="form.is_pro">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								生产信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1" >
                        <el-col :xs="24" :sm="3" style="margin-right: 45px;">
							<el-form-item label="入库超收比例" prop="overcharge" label-width="150">
								<el-input v-model="form.overcharge" placeholder="超收比例" clearable/>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3" style="margin-right: 45px;">
							<el-form-item label="入库欠收比例" prop="owe" label-width="150">
								<el-input v-model="form.owe" placeholder="欠收比例" clearable/>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3" style="margin-right: 45px;">
							<el-form-item label="是否允许超订单入库" prop="" label-width="150">
								<el-radio-group v-model="form.is_in">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card box-card2">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								其他信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建人" prop="create_admin_id">
								<el-select v-model="form.create_admin_id" filterable clearable placeholder="请选择创建人" style="width:90%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建时间" prop="create_date">
                                <el-date-picker v-model="form.create_date" type="date" placeholder="请选择日期" style="width: 90%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核人" prop="">
								<el-input v-model="form.goods_name" placeholder="请输入" clearable style="width: 90%;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核时间" prop="">
								<el-input v-model="form.goods_name" placeholder="请输入" clearable style="width: 90%;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="修改人" prop="save_admin_id">
                                <el-select v-model="form.save_admin_id" filterable clearable placeholder="请选择修改人" style="width:90%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="修改时间" prop="save_date">
                                <el-date-picker v-model="form.save_date" type="date" placeholder="请选择日期" style="width: 90%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="禁用人" prop="dis_admin_id">
                                <el-select v-model="form.dis_admin_id" filterable clearable placeholder="请选择禁用人" style="width:90%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="禁用时间" prop="dis_date">
                                <el-date-picker v-model="form.dis_date" type="date" placeholder="请选择日期" style="width: 90%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name: '新增物料',
	components: {},
	data() {
		return {
			dialog: {

			},
			//表单数据
			form: {
				id:"",
				goods_code: "",
				goods_name: "",
				cate_id: "",
				goods_spec: "",
				unit_id: "",
				pay_type: "",
				is_unit: "",
				pro_unit_id: "",
				rep_unit_id: "",
                is_sale:0,
                is_pro:0,
                is_in: 0,
                goods_image:"",
                create_admin_id:"",
                save_admin_id:"",
                dis_admin_id:"",
                create_date:"",
                save_date:"",
                dis_date:"",
                overcharge:"",
                owe:"",
				unit_all:[{},{},{}]
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
				goods_code: [{ required: true, message: '请输入物料编码' }],
				cate_id: [{ required: true, message: '请选择物料分组' }],
			},
			addTemplate: {},
			mode: '',
            unitList:[],
            wareList:[],
            clientList:[],
            cateList:[],
		}
	},
	mounted() {
		this.getCate()
		this.getUnit()
		this.getUser()
		this.getWare()
		if (this.$route.query.id) {
			this.setData()
			this.mode = this.$route.query.zhuangtai
		}
        if(this.$route.query.cate_id){
            this.form.cate_id = Number(this.$route.query.cate_id)
        }
	},
	watch: {
		$TOOL(e) {
			console.log('e', e)
		},
	},
	methods: {
        async getWare(){
			var res = await this.$API.all.getWare.get();
			this.wareList = res.data
		},
		// 获取单位
		async getUnit(){
			var res = await this.$API.all.getBeiUnit.get();
			this.unitList = res.data
		},
        // 获取分类
		async getCate(){
			var res = await this.$API.all.getBeiCate.get();
			this.cateList = res.data
		},
        // 获取人员
        async getUser(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.clientList = res.data;
        },
		//表单注入数据
		async setData() {
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			// Object.assign(this.form, data)
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.device.beiJian.goods.detail.get(reqData);
			this.form.id = this.$route.query.id
            this.form.goods_code = res.data.goods_code
            this.form.goods_name = res.data.goods_name
            this.form.cate_id = res.data.cate_id
            this.form.goods_spec = res.data.goods_spec
            this.form.unit_id = res.data.unit_id
            this.form.ware_id   = res.data.ware_id
            this.form.pay_type = res.data.pay_type
            this.form.is_unit = res.data.is_unit
            this.form.pro_unit_id = res.data.pro_unit_id
            this.form.rep_unit_id = res.data.rep_unit_id
            this.form.is_sale = res.data.is_sale
            this.form.is_pro = res.data.is_pro
            this.form.is_in = res.data.is_in
            this.form.overcharge = res.data.overcharge
            this.form.owe = res.data.owe
            this.form.goods_image = res.data.goods_image!=''? res.data.goods_image:''
            let array = []
            res.data.unit_all.map(item=>{
                array.push({
                    unit_id:Number(item.unit_id),
                    ratio:item.ratio
                })
            })
            this.form.unit_all = array
            this.form.create_admin_id = res.data.create_admin_id
            this.form.save_admin_id = res.data.save_admin_id
            this.form.dis_admin_id = res.data.dis_admin_id
            this.form.create_date = res.data.create_date
            this.form.save_date = res.data.save_date
            this.form.dis_date = res.data.dis_date
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.device.beiJian.goods.edit.post(this.form);
					} else {
						res = await this.$API.device.beiJian.goods.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						// this.$emit('success', this.form, this.mode)
						// this.visible = false;
						this.$message.success("操作成功")
						if (this.mode == '') {
							this.resetForm('dialogForm')
						} else {
							this.setData()
						}
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		dataFormChange() {
			this.totalCompute()
		},
	}
}
</script>
<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
